<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide
      ><img
        src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444"
        alt=""
    /></swiper-slide>
    <swiper-slide
      ><img
        src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444"
        alt=""
    /></swiper-slide>
    <swiper-slide
      ><img
        src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444"
        alt=""
    /></swiper-slide>
    <swiper-slide
      ><img
        src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444"
        alt=""
    /></swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
  
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Test",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1, //设置展示数量
        spaceBetween: 30, //间隔
        loop: true, //循环
        pagination: {
          //小圆点
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          //上下页
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 500px;
  background: gainsboro;
  img {
    width: 100%;
  }
}
</style>